<template>
  <div class="section">
    <video
      id="myVideo"
      src="cloud://dev-79d5f3.2787-dev-79d5f3-1255596177/mp4/head3.mp4"
      :danmu-list="danmuList"
      enable-danmu
      danmu-btn
      controls
      poster="cloud://dev-79d5f3.2787-dev-79d5f3-1255596177/images/skills.png	">
    </video>
    <div class="btn-area">
      <input @blur="bindInputBlur" placeholder="请输入临时弹幕，真实弹幕来自留言" placeholder-style="color:#bbb"/>
      <button @tap="bindSendDanmu">点击生成临时弹幕</button>
      <image src="../../static/images/close1.png" @tap="close"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Video',
    data () {
      return {
        inputValue: '',
        danmuList: []
      }
    },

    onLoad () {
      this.getMessageList()
      this.videoContext = wx.createVideoContext('myVideo')
    },

    methods: {
      bindInputBlur (e) {
        this.inputValue = e.mp.detail.value
      },

      bindSendDanmu: function () {
        this.videoContext.sendDanmu({
          text: this.inputValue,
          color: this.getRandomColor()
        })
        this.danmuList = [
          ...this.danmuList,
          {
            text: this.inputValue,
            color: this.getRandomColor(),
            time: 1 + (this.danmuList.length * 2)
          }
        ]
      },

      getRandomColor () {
        let rgb = []
        for (let i = 0; i < 3; ++i) {
          let color = Math.floor(Math.random() * 256).toString(16)
          color = color.length === 1 ? '0' + color : color
          rgb.push(color)
        }
        return '#' + rgb.join('')
      },

      getMessageList () {
        const db = wx.cloud.database()
        const message = db.collection('message')
        message.get().then(res => {
          let data = res.data.reverse()
          let arr = []
          if (data.length > 0) {
            data.forEach((item, index) => {
              arr.push({
                text: item.desc,
                color: this.getRandomColor(),
                time: 1 + (index * 2)
              })
            })
            this.danmuList = arr
          }
          console.log('danmuList', this.danmuList)
        })
      },

      close () {
        this.$emit('closeVideo')
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .section
    width 750rpx
    position relative

    #myVideo
      height 422rpx
      width 100%
      margin-bottom 20rpx

    .btn-area
      input
        width 660rpx
        border 1rpx solid #e5e5e5
        padding-left 30rpx
        height 80rpx
        line-height 80rpx
        font-size 30rpx
        color #ccc
        margin-bottom 30rpx
        margin-left 30rpx
        border-radius 16rpx

      button
        height 92rpx
        width 690rpx
        border-radius 16rpx
        background #1AAD19
        color #fff
        line-height 92rpx
        text-align center
        font-size 36rpx
        margin-bottom 40rpx

      image
        width 80rpx
        height 80rpx
        background #fff
        margin 0 auto
</style>
